<template>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="never" class="stat-card">
          <div class="icon-book"></div>
          <div class="stat-info">
            <div class="stat-title">总阅读量</div>
            <div class="stat-value">228</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" class="stat-card">
          <div class="icon-file"></div>
          <div class="stat-info">
            <div class="stat-title">文章总数</div>
            <div class="stat-value">7</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" class="stat-card">
          <div class="icon-message"></div>
          <div class="stat-info">
            <div class="stat-title">评论总数</div>
            <div class="stat-value">3</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" class="stat-card">
          <div class="icon-email"></div>
          <div class="stat-info">
            <div class="stat-title">留言总数</div>
            <div class="stat-value">18</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </template>
  
  <script setup>
  // 可以在这里添加组件逻辑
  </script>
  
  <style scoped lang="scss">
  .stat-card {
    height: 108px;
    border: none !important;
    margin-bottom: 20px;
    position: relative;
    padding: 20px;
    border-radius: 4px !important;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    
    .icon-book {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      width: 45px;
      height: 45px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2336b9d8"><path d="M21,5c-1.11-0.35-2.33-0.5-3.5-0.5c-1.95,0-4.05,0.4-5.5,1.5c-1.45-1.1-3.55-1.5-5.5-1.5S2.45,4.9,1,6v14.65 c0,0.25,0.25,0.5,0.5,0.5c0.1,0,0.15-0.05,0.25-0.05C3.1,20.45,5.05,20,6.5,20c1.95,0,4.05,0.4,5.5,1.5c1.35-0.85,3.8-1.5,5.5-1.5 c1.65,0,3.35,0.3,4.75,1.05c0.1,0.05,0.15,0.05,0.25,0.05c0.25,0,0.5-0.25,0.5-0.5V6C22.4,5.55,21.75,5.25,21,5z M21,18.5 c-1.1-0.35-2.3-0.5-3.5-0.5c-1.7,0-4.15,0.65-5.5,1.5V8c1.35-0.85,3.8-1.5,5.5-1.5c1.2,0,2.4,0.15,3.5,0.5V18.5z"/></svg>') no-repeat center;
      background-size: contain;
    }
    
    .icon-file {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      width: 45px;
      height: 45px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23409eff"><path d="M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8L14,2z M16,18H8v-2h8V18z M16,14H8v-2h8V14z M13,9V3.5 L18.5,9H13z"/></svg>') no-repeat center;
      background-size: contain;
    }
    
    .icon-message {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      width: 45px;
      height: 45px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff6b6b"><path d="M20,2H4C2.9,2,2,2.9,2,4v18l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M13,14h-2v-2h2V14z M13,10h-2V6h2V10z"/></svg>') no-repeat center;
      background-size: contain;
    }
    
    .icon-email {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      width: 45px;
      height: 45px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2313c2c2"><path d="M20,4H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M20,8l-8,5L4,8V6l8,5l8-5V8z"/></svg>') no-repeat center;
      background-size: contain;
    }
    
    .stat-info {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      width: 80px;
      
      .stat-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
        font-weight: 600;
        text-align: right;
        width: 100%;
      }
      
      .stat-value {
        font-size: 24px;
        color: #333;
        font-weight: 700;
        line-height: 1;
        text-align: left;
      }
    }
  }
  </style> 